<template>
    <div class="app">
        <my-navbar title="账户消息"></my-navbar>
        <list>
            <cell>
                <div class="account_item" v-for="item in accounts" @click="accountClick">
                    <div class="account_time">
                        <text class="account_time_title">{{item.sendDate}}</text>
                    </div>
                    <div class="account_item_box">
                        <div class="item_box_head">
                            <text class="box_head_tittle">{{item.msgContent.memo}}</text>
                            <text class="infoIcon">&#xe61f;</text>
                        </div>
                        <div class="head_subtitle_content">
                            <text class="box_head_subtitle">{{item.msgContent.title}}</text>
                        </div>
                        <div class="head_number_content">
                            <text class="box_head_number">¥{{item.msgContent.amount}}</text>
                        </div>
                        <div class="head_balance_content">
                            <text class="box_head_balance">当前账户总余额 ¥{{item.msgContent.balance}}</text>
                        </div>
                        <div class="head_notice_content" v-if="item.msgContent.expireDate!=null">
                            <text class="box_head_notice">余额有效期至{{item.msgContent.expireDate}}，请及时消费使用</text>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
    import {list, markAsRead, unReadCount, update} from "../../../api/msgPush"
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    export default {
        data() {
            return {
                msgKey: 'msg-account',
                accounts: []
            }
        },
        created(){
            this.loadMsgList()
            this.initIconFont()
        },
        components:{
            myNavbar
        },
        methods: {
            loadMsgList() {
                list({
                        msgKey: this.msgKey,
                        mchId: this.getGlobalData().mchId,
                    }
                ).then(res => {
                    res.data.data.forEach(item => {
                        item.sendDate = this.formatTime(item.sendDate)
                        item.msgContent = JSON.parse(item.msgContent)
                    //     if (!util.isNull(item.msgContent.expireDate)) {
                    //         item.msgContent.expireDate = this.formatTime(item.msgContent.expireDate)
                    //     } else {
                    //         item.msgContent.expireDate = null
                    //     }
                    //     if (item.readStatus == 2) {
                    //         item.readStatus = 1
                    //     }
                    })
                    this.accounts = res.data.data
                    markAsRead({
                        msgKey: this.msgKey,
                    }).then(res => {
                    })
                })
            },
            accountClick(){
                eeui.openPage({
                    url: 'root://pages/shareCenter/shareCenter.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                });
            }
        }
    }
</script>

<style scoped>
    .app {
        flex: 1
    }

    .app,
    body {
        background-color: #e6e6e6;
    }


    .account_item {
        width: 750px;
        display: flex;
        flex-direction: column;
        padding-top: 38px;
        align-items: center;
    }

    .account_time {
        /*height: 19px;*/

    }
    .account_time_title{
        font-size: 24px;
        text-align: center;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.3;
    }

    .account_item_box {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 38px;
        display: flex;
        flex-direction: column;
        padding: 30px;
        box-sizing: border-box;
    }

    .item_box_head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }


    .box_head_tittle {
        font-size: 28px;
        font-weight: 400;
        /* justify-content: center; */
        /* align-items: center; */
        /* display: flex; */
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        width: 600px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
    }

    .infoIcon {
        color: rgba(42, 42, 54, 0.3);
        font-family: iconfont2;
        font-size: 22px;
    }

    .box_head_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.3;
    }

    .head_subtitle_content {
        margin-top: 10px;
    }

    .head_number_content {
        margin-top: 5px;
    }

    .box_head_number {
        width: 176px;
        font-size: 24px;
        font-weight: bold;
        color: rgba(34, 34, 38, 1);
        line-height: 35px;
    }

    .head_balance_content {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .box_head_balance {
        height: 23px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .head_notice_content {
        margin-bottom: 36px;
    }

    .box_head_notice {
        height: 24px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }
</style>
